<template>
    <div class="xiaobanxin">
      <div class="top">
        <input type="text" />
        <p>搜索"{{ this.$store.state.Valtxt.toString() }}",找到首单曲</p>
      </div>
      <div class="bottom">
        <el-tabs class="biaotou" type="border-card">
          <el-tab-pane label="单曲">
            <table>
              <tr v-for="(item, index) in danqu" :key="index">
                <td>{{ item.name }}</td>
                <td>
                  {{ item.ar[0].name }}/
                  {{ item.ar[1].name }}
                </td>
                <td>{{ item.al.name }}>></td>
                <td>1</td>
              </tr>
            </table>
          </el-tab-pane>
          <el-tab-pane label="歌手"></el-tab-pane>
          <el-tab-pane label="专辑"></el-tab-pane>
          <el-tab-pane label="视频"></el-tab-pane>
          <el-tab-pane label="歌词"></el-tab-pane>
          <el-tab-pane label="歌单"></el-tab-pane>
          <el-tab-pane label="声音主播"></el-tab-pane>
          <el-tab-pane label="用户"></el-tab-pane>
        </el-tabs>
      </div>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[35, 70, 105, 140]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </template>
  
  <script>
  import { GetsousuoApi } from "@/request/api";
  export default {
    data() {
      return {
        danqu: [],
      };
    },
    created() {
      GetsousuoApi({ keywords: this.$store.state.Valtxt }).then((res) => {
        this.danqu = res.data.result.songs;
        console.log(res);
        console.log(this.$store.state.Valtxt);
      });
    },
  };
  </script>
   
  <style lang = "less" scoped>
  @import "../../assets/base.less";
  table {
    td {
      font-size: 14px;
      &:nth-of-type(1) {
        width: 450px;
      }
      &:nth-of-type(2) {
        width: 150px;
      }
      &:nth-of-type(3) {
        width: 80px;
      }
      &:nth-of-type(4) {
        width: 80px;
      }
      background-color: skyblue;
    }
  }
  </style>